<template>
    <div :class="[changeDirection,'flex-fluid']">
        <div class="radio-box flex-row" :class="[v.disabled ? 'disabled':'']" v-for="v in items" @click="select(v)">
            <div class="bui-icon-box" v-if="v.value === value"><icon @click="select(v)"  :size="iconSize" name="ion-android-radio-button-on" :color="selectedColor"></icon></div>
            <div class="bui-icon-box" v-if="v.value !== value"><icon @click="select(v)"  :size="iconSize" name="ion-android-radio-button-off" :color="unSelectedColor"></icon></div>
            <text class="radio-label" :style="{'font-size':fontSize, color: color}">{{v.title || v.value}}</text>
        </div>
    </div>
</template>
<style lang="scss">
  .radio-box {
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    //margin-right: $nb40;
    //padding-right: $nb20;
  }
  .checkbox{
    border-bottom-width: 1px;
    border-bottom-color: #e2e2e2;
  }
  .checkbox:active{
    background-color: #f5f5f5;
  }

  .radio-label {
    font-size: 30px;
    margin-left: 5px;
  }

  .disabled {
    opacity: 0.5;
  }

  .switch-box {
    height: 80px;
    flex-direction: row;
    align-items: center;
    background-color: #ffffff;
  }

  .switch {
    position: absolute;
    right: 0px;
    top: 15px;
  }

  .switch-label {
    font-size: 30px;
  }

  .flex-column {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-fluid{
    flex-wrap: wrap;
  }

  .cb-flex-9{
    flex: 9;
  }
  .cb-flex-1{
    flex: 1;
    flex-direction:row;
    justify-content:flex-end;
  }
</style>

<script>
  import icon from './icon'

  export default {
    props: {
        "value": {
            type: String,
        },
        "direction": {
            type: String,
            default: 'horizontal' // horizontal | vertical
        },
        "items": {
            type: Array,
            default: []
        },
        "fontSize":{
            type:[String,Number],
            default:32
        },
        "iconSize":{
            type:[String,Number],
            default:48
        },
        "selectedColor":{
            type: String,
            default:"#00cc66"
        },
        "unSelectedColor":{
            type: String,
            default:"#e2e2e2"
        },
        "color":{
            type: String,
            default:"black"
        }
    },
    computed:{
        changeDirection () {
            return this.direction=="horizontal"? "flex-row":"flex-column";
        }
    },
    data() {
        return{
        }
    },
    methods: {
        select (v) {
            if(v.disabled) return;
            this.$emit("change", v.value);
            this.$emit("input", v.value);
        }
    },
    components: { icon },
    watch: {
        value (value) {
            this.$emit("afterChange", value)
        }
    }
  }  
</script>
